<template>
	<view>
		<view class="box">
			<view class="info">
				<image v-if="info.img" :src="info.img.split(',')[0]" class="info_left"></image>
				<view class="info_right">
					<!-- //type 1活动2课程3商城 -->
					<view class="title_box">
						<view class="title">{{ type == 2 ? info.course_name : info.activity_name }}</view>
						<view class="status" v-if="type == 2">{{ pay_status[info.pay_status] }}</view>
					</view>
					<view class="time_box" v-if="type == 2">
						<view class="tag">报名截止时间</view>
						<view class="time">{{ dateFormat(info.sign_end_time) }}</view>
						<!-- <view class="class_hour">共22课节</view> -->
					</view>
					<view class="time_box" v-else>
						<view class="tag">开始时间</view>
						<view class="time">{{ dateFormat(info.start_time) }}</view>
						<!-- <view class="class_hour">共22课节</view> -->
					</view>
					<view class="teacher" v-if="type == 2">老师:{{ info.teacher_name }}</view>
					<!-- <view class="teacher" v-else>老师:{{info.teacher_name}}</view> -->
				</view>
			</view>
		</view>
		<!-- 申请原因 -->
		<view class="reason">
			<view class="item_left">选择退款人</view>
			<view class="item_right" @click="openPopup"><text>{{ familyname }}</text>
				<image src="@/static/jt1.png"></image>
			</view>
		</view>
		<!-- 退款额度： -->
		<!-- <view class="refund">
			<view class="item_left">退款额度：</view>
			<view class="item_right">3688<text class="small">积分</text>+<text class="small">￥</text>10
				</image>
			</view>
		</view> -->

		<!-- 补充描述和凭证 -->
		<view class="description">
			<view class="title">
				<view class="title_left">申请原因</view>
				<!-- <view class="title_right">您还可以输入{{comInput}}字</view> -->
			</view>
			<textarea class="textarea" auto-height v-model="reason" :maxlength="100" placeholder="选填，请您补充描述，更好的处理问题"
				placeholder-class="placInput"></textarea>
			<!-- <view class="image_box">
				<image v-for="(item,index) in imgList" :key="index" :src="item.url"></image>
				<view class="upload_image">
					<image src="@/static/upload@img.png"></image>
					<text>添加图片</text>
				</view>
			</view> -->
		</view>
		<view class="refoundbut" @click="sumbit()">
			提交
		</view>


		<!-- 弹框 -->
		<uni-popup ref="popup">
			<view class="popup_box">
				<view class="title_box">
					<text class="zw"></text>
					<text>退款申请人</text>
					<image src="../../static/off.png" @click="offHxm"></image>
				</view>
				<radio-group style="width: 100%;height: 100%;" @change="popupChange">
					<view class="popup_content" v-if="info.class_time">
						<label class="content_item" v-if="type == 2" v-for="(item, index) in info.class_time[0].family"
							:key="item.family_id">
							<view class="left">{{ item.name }}</view>
							<radio :value="item.family_id" color="#FF8A9B"></radio>
						</label>

					</view>
					<view class="popup_content">
						<label class="content_item" v-if="type == 1" v-for="(item, index) in info.list"
							:key="item.family_id">
							<view class="left">{{ item.family_name }}</view>
							<radio :value="item.family_id" color="#FF8A9B"></radio>
						</label>
					</view>

				</radio-group>
				<view class="btn" @click="verify">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 可输入最大值
			maxInput: 170,
			input: "",
			imgList: [{
				url: "../../static/logo.png"
			}],
			familylist: [{
				name: "物流太慢",
				id: 0
			},
			{
				name: "不想要",
				id: 1
			},
			{
				name: "不喜欢",
				id: 2
			},
			{
				name: "其他原因",
				id: 3
			}
			],
			changeID: null,
			reason: "",
			familyname: '请选择',
			id: '',
			type: '',//1活动2课程3商城
			info: {},
			pay_status:['未支付', '待上课', '已完结', '待评价', '已完成', '已退款', '已取消','退款中'],//支付状态0未支付1已支付/待核销3已核销/待评价4已评价/已完成5已退款6已取消
		};
	},
	onLoad(option) {
		this.id = option.id
		this.type = option.type//1活动2课程3商城
		this.getinfo(option.id)
		this.getfamfily()
	},
	methods: {
		async getinfo(id) {
			if (this.type == 2) {
				await this.$http({
					url: '/api/course/order_detail',
					data: {
						id: id
					}
				}).then(res => {
					this.info = res.data
				})
			} else {
				await this.$http({
					url: '/api/api/activityUserDetail',
					data: {
						activity_user_id: id
					}
				}).then(res => {
					this.info = res.data
				})
			}

		},
		getfamfily() {
			this.$http({
				url: '/api/course/family_list'
			}).then(res => {
				this.familylist = res.data
			})
		},
		sumbit() {
			if (this.changeID == null) {
				uni.showToast({
					title: '请选择退款申请人',
					icon: 'none'
				})
				return
			}
			this.$http({
				url: '/api/wxpay/refund',
				data: {
					family_id: this.changeID,
					orderid: this.id,
					type: this.type,//1活动2课程3商城
					reason: this.reason
				}
			}).then(res => {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateBack({ delta: 1 })
					uni.$emit('refund')

					// if (this.type == 2) {
					// uni.navigateBack({ delta: 1 })
					// uni.navigateTo({
					// 	url: '/pages/myCourse/myCourse'
					// })
					// } else {
					// uni.navigateTo({
					// 	url: '/pagemy/actorderlist/actorderlist'
					// })
					// }
				}, 500);
			})
		},
		// 打开弹窗
		openPopup() {
			this.$refs.popup.open("bottom")
		},
		// 弹框内容选择事件
		popupChange(e) {
			console.log(e.detail.value);
			this.changeID = e.detail.value
		},
		// 弹框确定
		verify() {
			if (!this.changeID) return
			if (this.type == 2) {
				this.familyname = this.info.class_time[0].family.find(item => item.family_id == this.changeID).name
			} else {
				this.familyname = this.info.list.find(item => item.family_id == this.changeID).family_name
			}
			console.log(this.familyname, this.type)
			this.$refs.popup.close()
		},
		dateFormat: function (value) {
			var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var year = date.getFullYear();
			var month = ("0" + (date.getMonth() + 1)).slice(-2);
			var sdate = ("0" + date.getDate()).slice(-2);
			var hour = ("0" + date.getHours()).slice(-2);
			var minute = ("0" + date.getMinutes()).slice(-2);
			var second = ("0" + date.getSeconds()).slice(-2);
			// 拼接
			var result = year + "年" + month + "月" + sdate + "日 " + hour + ":" + minute //+ ":" + second;
			// 返回
			return result;
		},
	},
	computed: {
		comInput() {
			return this.maxInput - this.input.length
		}
	}
}
</script>
<style>
.placInput {
	font-size: 32rpx;
	font-family: Source Han Sans CN-Regular, Source Han Sans CN;
	font-weight: 400;
	color: #888888;
}
</style>
<style lang="scss" scoped>
// 
.box {
	width: 750rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	padding: 36rpx 30rpx 0 30rpx;
	box-sizing: border-box;
	margin: 20rpx auto 24rpx auto;

	.info {
		display: flex;
		justify-content: space-between;
		gap: 0 26rpx;
		padding-bottom: 30rpx;

		.info_left {
			width: 160rpx;
			height: 160rpx;
			background: #FFFFFF;
			border-radius: 6rpx;
			flex-shrink: 0;
		}

		.info_right {
			width: 100%;
			display: flex;
			flex-direction: column;

			.title_box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;

				.title {
					font-size: 36rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #222222;
					line-height: 1em;
				}

				.status {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FF8A9B;
				}
			}

			.time_box {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				justify-content: space-between;

				.tag {
					padding: 6rpx 6rpx 4rpx 6rpx;
					background: linear-gradient(180deg, #FCBB8C 0%, #FF8158 100%);
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 1em;
					border-radius: 4rpx 8rpx 8rpx 8rpx;
					// margin-right: 18rpx;
				}

				.time {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #555555;
					line-height: 1em;
					// margin-right: 20rpx;
				}

				.class_hour {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #555555;
					line-height: 1em;
				}
			}

			.teacher {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #555555;
				line-height: 1em;
			}

		}
	}
}

// 退款原因
.reason {
	width: 750rpx;
	height: 98rpx;
	background: #FFFFFF;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 28rpx;
	box-sizing: border-box;

	.item_left {
		font-size: 32rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #222222;
	}

	.item_right {
		font-size: 32rpx;
		font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
		font-weight: normal;
		color: #888888;
		display: flex;
		align-items: center;
		gap: 0 24rpx;

		image {
			width: 8rpx;
			height: 16rpx;
		}
	}
}

// 退款额度
.refund {
	width: 750rpx;
	height: 98rpx;
	background: #FFFFFF;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	display: flex;
	align-items: center;
	padding: 0 28rpx;
	box-sizing: border-box;
	margin-top: 24rpx;

	.item_left {
		font-size: 32rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #222222;
	}

	.item_right {
		font-size: 32rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #FF6178;
		display: flex;
		align-items: center;

		.small {
			font-size: 24rpx;
		}

	}
}

// 补充描述和凭证
.description {
	width: 750rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	margin-top: 26rpx;
	padding: 30rpx 30rpx 24rpx 30rpx;
	box-sizing: border-box;

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;

		.title_left {
			font-size: 32rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #222222;
			line-height: 1em;
		}

		.title_right {
			font-size: 32rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #555555;
			line-height: 1em;
		}
	}

	.textarea {
		width: 100%;
		min-height: 200rpx;
		margin-bottom: 30rpx;
	}

	.image_box {
		width: 100%;
		min-height: 157rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 18rpx;


		image {
			width: 157rpx;
			height: 157rpx;
		}

		.upload_image {
			width: 157rpx;
			height: 157rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			border: 2rpx dashed #DBDBDB;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 20rpx 0;
			font-size: 24rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #999999;
			line-height: 1em;

			image {
				width: 49rpx;
				height: 45rpx;
			}
		}
	}
}

// 弹框
.popup_box {
	width: 750rpx;
	height: 694rpx;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	display: flex;
	flex-direction: column;

	.title_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 128rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		flex-shrink: 0;
		border-bottom: 1rpx solid #DBDBDB;

		.zw {
			display: block;
			width: 40rpx;
			height: 40rpx;
		}

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.popup_content {
		width: 100%;
		height: 100%;
		padding: 50rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.content_item {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				font-size: 32rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}

			.right {}
		}
	}

	.btn {
		width: 690rpx;
		height: 84rpx;
		background: #FF8A9B;
		border-radius: 83rpx 83rpx 83rpx 83rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 24rpx auto;
		flex-shrink: 0;
		font-size: 36rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
	}
}

.refoundbut {
	width: 690rpx;
	height: 84rpx;
	background: #FF8A9B;
	border-radius: 83rpx;
	margin: 50rpx auto;
	font-size: 36rpx;
	font-family: Source Han Sans CN-Medium, Source Han Sans CN;
	font-weight: 500;
	color: #FFFFFF;
	text-align: center;
	line-height: 84rpx;
}
</style>
